<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons :: head(~{::title})">
    <meta charset="UTF-8">
    <title>时间轴</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me2.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="../static/css/timeline.css" th:href="@{/css/timeline.css}">
    <link rel="stylesheet" href="../static/css/timeline.css" th:href="@{/css/timeline.css}">
    <script type="text/javascript">

        $(function () {
            var addr = $("#headPortrait").html();
            $("#img").attr("src", addr);
        });

    </script>
</head>
<body>

<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" th:replace="commons :: menu(5)">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item" style="font-family: 'YaHei Consolas Hybrid'">Blog</h2>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini home icon"></i>&nbsp;<span
                    style="font-size: 22px;font-family: 华文行楷">首页</span></a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>&nbsp;<span
                    style="font-size: 22px;font-family: 华文行楷">分类</span></a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>&nbsp;<span
                    style="font-size: 22px;font-family: 华文行楷">标签</span></a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>&nbsp;<span
                    style="font-size: 22px;font-family: 华文行楷">归档</span></a>
            <a href="#" class="active m-item item m-mobile-hide"><i class="mini info icon"></i><span
                    style="font-size: 22px;font-family: 华文行楷">关于我</span></a>
            <div class="right m-item item m-mobile-hide">
                <div class="ui icon inverted transparent input m-margin-tb-tiny">
                    <input type="text" placeholder="Search....">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>
<br>
<br>
<!--时间轴内容-->
<div class="doc-container m-padded-tb-massivex m-opacity animated fadeIn" id="doc-container">

    <section class="timeline">
        <ul>

            <li class="" th:each="time:${times}">
                <div>
                    <time th:text="${#dates.format(time.createTime, 'yyyy-MM-dd')}">2020-06-15</time>
                    <div class="scientist">
                        <h3 class="state" style="text-align:center;font-size: 16px;color: #000;"
                            th:text="${time.content}">【SpringBoot搭建个人博客】-
                            相册管理（九）</h3>
                    </div>
                </div>
            </li>

            <!--/*-->
            <li class="">
                <div>
                    <time>2020-06-15</time>
                    <div class="scientist">
                        <a href="/blog/47" target="_blank">
                            <h3 class="state" style="text-align:center;font-size: 16px;color: #000;">【SpringBoot搭建个人博客】-
                                友链管理（八）</h3>
                        </a>
                    </div>
                </div>
            </li>

            <li class="">
                <div>
                    <time>2020-06-08</time>
                    <div class="scientist">
                        <a href="/blog/46" target="_blank">
                            <h3 class="state" style="text-align:center;font-size: 16px;color: #000;">【SpringBoot搭建个人博客】-
                                博客管理（七）</h3>
                        </a>
                    </div>
                </div>
            </li>

            <li class="">
                <div>
                    <time>2020-06-03</time>
                    <div class="scientist">
                        <a href="/blog/44" target="_blank">
                            <h3 class="state" style="text-align:center;font-size: 16px;color: #000;">【SpringBoot搭建个人博客】-
                                分类管理（六）</h3>
                        </a>
                    </div>
                </div>
            </li>

            <li class="">
                <div>
                    <time>2020-06-01</time>
                    <div class="scientist">
                        <a href="/blog/43" target="_blank">
                            <h3 class="state" style="text-align:center;font-size: 16px;color: #000;">【SpringBoot搭建个人博客】-
                                实体类构建（五）</h3>
                        </a>
                    </div>
                </div>
            </li>

            <li class="">
                <div>
                    <time>2020-05-28</time>
                    <div class="scientist">
                        <a href="/blog/42" target="_blank">
                            <h3 class="state" style="text-align:center;font-size: 16px;color: #000;">【SpringBoot搭建个人博客】-
                                后台登录（四）</h3>
                        </a>
                    </div>
                </div>
            </li>

            <li class="">
                <div>
                    <time>2020-05-23</time>
                    <div class="scientist">
                        <a href="/blog/41" target="_blank">
                            <h3 class="state" style="text-align:center;font-size: 16px;color: #000;">【SpringBoot搭建个人博客】-
                                框架搭建（三）</h3>
                        </a>
                    </div>
                </div>
            </li>

            <li class="">
                <div>
                    <time>2020-05-15</time>
                    <div class="scientist">
                        <a href="/blog/38" target="_blank">
                            <h3 class="state" style="text-align:center;font-size: 16px;color: #000;">【SpringBoot搭建个人博客】-
                                技术需求（二）</h3>
                        </a>
                    </div>
                </div>
            </li>

            <li class="">
                <div>
                    <time>2020-05-15</time>
                    <div class="scientist">
                        <a href="/blog/37" target="_blank">
                            <h3 class="state" style="text-align:center;font-size: 16px;color: #000;">【SpringBoot搭建个人博客】-
                                前端页面展示（一）</h3>
                        </a>
                    </div>
                </div>
            </li>

            <!--*/-->


        </ul>
    </section>

</div>

<!--置顶图标-->
<div id="toolbar" class="m-padded-tb-large m-fixed m-right-bottom">
    <a href="#" class="ui teal icon button"><i class="chevron up icon"></i> </a>
</div>

<br>
<br>
<br>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!-- 底部 -->
<footer class="ui inverted vertical segment m-padded-tb-massive" th:fragment="footer">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" class="ui rounded image"
                             alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item m-text-thin">用户故事（User Story）</a>
                    <a href="#" class="item m-text-thin">用户故事（User Story）</a>
                    <a href="#" class="item m-text-thin">用户故事（User Story）</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item m-text-thin">Email：2605811855@qq.com</a>
                    <a href="#" class="item m-text-thin">QQ：2605811855</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 Lirenmi Designed by Lirenmi</p>
    </div>

</footer>
<script src="../static/lib/timeline/timeline.js" th:src="@{/lib/timeline/timeline.js}"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js"
        th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
<script type="text/javascript" th:replace="commons :: script"></script>
</body>
</html>